<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title>CFTagLib - The cf_form Tag</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <style type="text/css">
  #g_title p, #g_footer p, #g_description p {
    margin: 0;
  }
  /*

  	-- -- -- -- -- -- --
  	Browser Fixes
  	-- -- -- -- -- -- --
  	
  	This file uses CSS filtering methods to fix various
  	layout bugs.

  	Each of the following three imported files is a 
  	separate, browser-specific CSS file that keeps all 
  	hacks out of the main style sheet.
  	
  	Over time, as supporting these browsers no longer
  	remains a priority, cleaning up the hacks is as
  	easy as deleting the @import statement below, or
  	simply no longer linking this file from the HTML.
  	
  */

  /* 
    fix ie6 "peekaboo bug" using the "holly hack". 
    Note, this style only gets applied to ie6
  */
  * html .wrapper {
    height: 0.1%;
  }

  /* 
   * IE5 mac - overrides the IE/Win hack 
   */

  /*\*//*/

  * html #threecolumn div {
  	height: auto;
  }

  /**/


  /* 
   * IE5/Win-specific CSS -ensures #container wraps all content on window resize
   */

  @media tty {
   i{content:"\";/*" "*/}} * html #container { height: 1%; } /*";}
  }/* */
  /* Styling for editable elements. Eventually, this will be part of the style. */
  .editable {
    border: 1px dashed blue;
  }
  
  #footer {
    clear: both;
  }
  
  /* Extra divs hidden by default. The custom CSS can override this though */
  #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
    display: none;
  }
  
  a img,:link img,:visited img {border: none;}


  /*
    -- -- -- -- -- -- --
    1 Column Layout
    -- -- -- -- -- -- --
  */

  /* Center #container, constrain to 718px width
  ----------------------------------------------- */
  body {
    text-align: center;
  }
  #container {
    width: 718px;
    text-align: left;
    margin: 0 auto;
  }

  #main-content {
    overflow: hidden;
  }

  /** BEGIN CUSTOM SKIN **/
  /* general layout */

  body {
    font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
    font-size: 83%;
    margin: 0em;
    padding: 0em;
    border-top: 1em solid #e2e6ec;
    background: #e2e6ec url(container-fill.gif) center repeat-y;
  }
  body div#container {
    padding: 0em;
    margin-top: 0em;
    border-top: 1px solid #e2e6ec; /* a hack: without it Firefox adds top margin in layouts with sidebar */
    background: url(container-top.gif) top no-repeat;
  }
  div#container div.wrapper {
    padding: 0em;
    margin: 0em;
  }
  div#header {
    padding: 0em 35px;
    padding-top: 2em;
    padding-bottom: 2em;
    _padding-bottom: 1em; /* hack for IE6 */
    margin: 0em;
    margin-top: 2em;
    background: url(header-fill.gif) repeat-y;
  }
  div#header div.wrapper {
    padding: 0em;
    margin: 0em;
  }
  div#main-content {
    line-height: 160%;
    color: #3f3f3f;
    background: url(content-top.gif) top no-repeat;
  }
  div#sidebar,div#sidebar-alternate {
    font-size: 83%;
    line-height: 140%;
    color: #3f3f3f;
    background: url(content-top.gif) top no-repeat;
    padding: 0em;
    margin: 0em;
    padding-top: 1.5em;
  }
  div#footer {
    margin-top: 2em;
    background: url(content-top.gif) top no-repeat;
    padding: 1em 35px;
    color: #7f7f7f;
  }
  div#footer hr { /* I don't like this, but I have no idea why that <hr> is there */
    display: none;
  }

  /* adjusting widths for different layouts */

  body#onecolumn div#main-content {
    padding: 0em 35px;
    width: 648px;
  }
  body#twocolumn-right div#main-content {
    padding: 0em 25px;
    width: 420px;
    margin-left: 10px;
  }
  body#twocolumn-left div#main-content {
    padding: 0em 25px;
    width: 420px;
    margin-right: 8px;
    display: inline;
  }
  body#twocolumn-left div#sidebar {
    padding-left: 15px;
    width: 215px;
  }
  body#twocolumn-right div#sidebar {
    padding-right: 15px;
    width: 215px;
  }
  body#threecolumn div#main-content {
    padding: 0em 25px;
    width: 370px;
  }
  body#threecolumn div#sidebar {
    padding-left: 15px;
    width: 125px;
    margin-left: 10px;
    display: inline;
  }
  body#threecolumn div#sidebar-alternate {
    padding-right: 15px;
    width: 125px;
  }

  /* general styles: headings */

  h1, h2, h3, h4, h5, h6, p.description {
    font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif; 
  }
  h1 {
    font-size: 160%;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 400%; /* for padding below, the above line took away other possibilities */
  }
  h2 {
    font-size: 120%;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 400%; /* for padding below, the above line took away other possibilities */
  }
  h3 {
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    color: black;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 300%; /* for padding below, the above line took away other possibilities */
  }
  h4 {
    font-size: 100%;
    font-weight: bold;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    color: black;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 200%; /* for padding below, the above line took away other possibilities */
  }
  h5 {
    font-size: 100%;
    font-weight: bold;
    color: black;
    display: inline;
  }
  h6 {
    font-size: 100%;
    font-weight: normal;
    color: black;
    display: inline;
  }
  hr {
    background: white;
    height: 1px;
    border: 0em;
    border-top: 1px solid #b3e6e6;
    margin: 1em 0em;
  }

  /* general styles: links */

  a {
    color: #125ebc;
    text-decoration: none;
    border-bottom: 1px solid #125ebc; /* this underline is further away from the text = more legibility */
  }
  a:visited {
    color: #638bbc;
    text-decoration: none;
    border-bottom: 1px solid #638bbc; /* this underline is further away from the text = more legibility */
  }

  /* general styles: lists */

  ul, ol {
    margin-left: 1.8em;
    padding: 0em;
  }
  dt {
    margin-left: 1.8em;
  }
  blockquote {
    margin-left: 1.8em;
  }

  /* general styles: tables */

  table {
    border-collapse: collapse;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: -0.6em;
    margin-right: -0.6em;
  }

  table td,table th {
    padding: 0.3em 0.6em;
    vertical-align: top;
    text-align: left;
  }
  table th {
    border-bottom: 1px solid #b3e6e6;
  }
  table tr td{
      border: 1px solid #b3e6e6;
  }
  table caption {
    text-align: left;
    font-weight: bold;
    color: #4FBBBB;
    padding: 0em;
    _padding: 0em 0.6em; /* hack for IE6: it understands padding differently here */
  }

  /* specific styles */

  h1#page-title {
    font-size: 220%;
    font-weight: normal;
    color: #125ebc;
    letter-spacing: -1px;
    display: block;
    border: 0em;
    padding: 0em;
    margin: 0em;
    line-height: 100%;
  }
  div#g_description {
    font-size: 140%;
    font-weight: normal;
    color: #125ebc; 
  }

  /* correcting horizontal margins for different layouts */

  body#twocolumn-left div#header, body#threecolumn div#header {
    padding-left: 25px;
  }

  /** END CUSTOM SKIN **/
  </style>

  <!-- Hack to avoid flash of unstyled content in IE -->
  

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script> </script>
</head>

<body id="onecolumn">
  <div id="container">
    <div class="wrapper">
      <div id="header">
        <div class="wrapper">
          <h1 id="page-title"><div id='g_title'><p>The cf_form Tag</p></div></h1>

          <div style="clear: both;"></div>
          <p class="description"><div id='g_description'>&nbsp;</div></p>
          <div style="clear: both"></div>
        </div>
      </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="formGroup.html">&laquo; Previous</a> | <a href="cf_select.html">Next &raquo;</a>
      <!-- /editable --><!-- /wrapper --><!-- /header -->
      <div id="main-content">
        <div class="wrapper">
          <div class="content-item"><div id='g_body'><p></p> 
<link href="style.css" rel="stylesheet">


<h3>The cf_form Tag</h3> 
<br/><br/>
The cf_form tag does a lot more than the html form tag.  By default, cf_form comes with three buttons: submit, reset, and cancel.  We'll talk more about managing buttons later.  If you specify a <em>legend</em> attribute, it will wrap the form in the html fieldset and legend tags.  You can specify the css class for the legend tag with the <em>classLegend</em> attribute.
<br/><br/>
Unlike the html form tag, the default value for the <em>method</em> attribute is <em>post</em>.
<br/><br/>
Like the html form tag, cf_form has no required attributes.  If no attributes specified, the <em>name</em> and <em>id</em> will take the name of the fuseaction and the <em>action</em> will take the url of the current page.
<br/><br/>
<p class="pre">
&lt;cf_form legend="Create New Account"&gt;<br/>
<span class="tab1">...</span>
&lt;/cf_form&gt;
</p>
It will generate something in this effect:
<p class="pre">
&lt;form style="margin:0px" name="currentFuseaction" id="currentFuseaction" method="Post" action="index.cfm?fuseaction=[currentCircuit].[currentFuseaction]"&gt;
<br/>
<span class="tab1">&lt;fieldset>&lt;legend class="legend">Create New Account&lt;/legend></span>
<br/>
<span class="tab2">...</span>
	<span class="tab2">&lt;div id="form-buttons" style="margin-top: 12px"></span>
		<span class="tab3">&lt;button type="submit">Save&lt;/button></span>
		<span class="tab3">&lt;button type="reset">Reset&lt;/button></span>
		<span class="tab3">&lt;button type="button" onclick="window.location='index.cfm'">Cancel&lt;/button></span>
		<span class="tab3">&lt;noscript>&lt;a href="index.cfm">Cancel&lt;/a>&lt;/noscript></span>
	<span class="tab2">&lt;/div></span>
<span class="tab1">&lt;/fieldset></span>
&lt;/form>
</p>
For simple actions, cf_form can figure out the <em>action</em> from <em>name</em> or <em>id</em> attribute.  
<br/><br/>
For example, if the <em>name</em> attribute is <em>create</em>, cf_form would figure out the action is <em>index.cfm?fuseaction=[currentCircuit].create</em>.  If the <em>name</em> is <em>user.modify</em>, it returns <em>index.cfm?fuseaction=user.modify</em>.
<br/>
<br/>

When the action URL is complex, you have to specify it, but we would help by adding <em>index.cfm?fuseaction=</em> or <em>index.cfm?fuseaction=[currentCircuit]</em> if you don't include it.
<p class="pre">
&lt;cf_form legend="Edit Account" action="modify&amp;id=#attributes.id#&amp;type=#attributes.type#"&gt;<br/>
<span class="tab1">...</span>
</p>
It returns:
<p class="pre">
&lt;form style="margin:0px" name="modify" id="modify" method="Post" action="index.cfm?fuseaction=[currentCircuit].modify&amp;id=[id]&amp;type=[type]"&gt;
<br/>
<span class="tab1">&lt;fieldset>&lt;legend class="legend">Edit Account&lt;/legend></span>
<br/>
<span class="tab2">...</span>

</p>
Or
<p class="pre">
&lt;cf_form legend="Edit Account" action="user.modify&amp;id=#attributes.id#&amp;type=#attributes.type#"&gt;<br/>
<span class="tab1">...</span>
</p>
It returns:
<p class="pre">
&lt;form style="margin:0px" name="modify" id="modify" method="Post" action="index.cfm?fuseaction=user.modify&amp;id=[id]&amp;type=[type]"&gt;
<br/>
<span class="tab1">&lt;fieldset>&lt;legend class="legend">Edit Account&lt;/legend></span>
<br/>
<span class="tab2">...</span>

</p>
Back to the default buttons, they are there for convenience only.  The moment you add your own buttons, these buttons will disappear.  If you only want to show one or two buttons, you can set them not to show with <em>showSubmit</em>, <em>showReset</em>, and <em>showCancel</em> attributes.  By default, the texts appear on these buttons are <em>Save</em>, <em>Reset</em>, and <em>Cancel</em>.  You can change them with <em>submit</em>, <em>reset</em>, and <em>cancel</em> attributes.
<p class="pre">
&lt;cf_form legend="Edit Account" name="user.modify" showReset="false" showCancel="false" submit="Modify"&gt;<br/>
<span class="tab1">...</span>
&lt;/cf_form&gt;
</p>
It returns:
<p class="pre">
&lt;form id="modify" style="margin:0px" action="index.cfm?do=user.modify" method="Post" name="modify"&gt;
<br/>
<span class="tab1">&lt;fieldset>&lt;legend class="legend">Edit Account&lt;/legend></span>
<br/>
<span class="tab2">...</span>
	<span class="tab2">&lt;div id="form-buttons" style="margin-top: 12px"></span>
		<span class="tab3">&lt;button type="submit">Modify&lt;/button></span>
	<span class="tab2">&lt;/div></span>
<span class="tab1">&lt;/fieldset></span>
&lt;/form>
</p>
For the <em>cancel</em> button, we also add the noscript equivalent link.  By default, its URL is the default page - index.cfm or such.  You can specify the URL for the cancel button using <em>cancelURL</em> attribute.

<p class="pre">
&lt;cf_form name="user.modify" showReset="false" cancelURL="user.list"&gt;<br/>
<span class="tab1">...</span>
&lt;/cf_form&gt;
</p>
It returns:
<p class="pre">
&lt;form id="modify" name="modify" action="index.cfm?do=user.modify" style="margin:0px" method="Post"&gt;
<br/>
<span class="tab1">...</span>
	<span class="tab1">&lt;div id="form-buttons" style="margin-top: 12px"></span>
		<span class="tab2">&lt;button type="submit">Save&lt;/button></span>
		<span class="tab2">&lt;button type="button" onclick="window.location='index.cfm?do=user.list'">Cancel&lt;/button></span>
		<span class="tab2">&lt;noscript>&lt;a href="index.cfm?do=user.list">Cancel&lt;/a>&lt;/noscript></span>
	<span class="tab1">&lt;/div></span>
&lt;/form>
</p>
<h4>Available Attributes</h4>
<table>
<tr>
<th>Attribute</th>
<th>Required</th>
<th>Default</th>
<th>Values</th>
<th>Description</th>
</tr>
<tr><td>action</td><td>false</td><td>current page URL</td><td></td><td>A URL to send data when the submit button is pushed</td></tr>
<tr><td>cancel</td><td>false</td><td>Cancel</td><td></td><td>text to display on the cancel button</td></tr>

<tr><td>classLegend</td><td>false</td><td>legend</td><td></td><td>css class to format the form legend</td></tr>
<tr><td>id</td><td>false</td><td>name of current fuseaction</td><td></td><td>form id</td></tr>

<tr><td>legend</td><td>false</td><td></td><td></td><td>Legend of the form</td></tr>
<tr><td>method</td><td>false</td><td>post</td><td>post<br/>get</td><td>method of sending data</td></tr>
<tr><td>name</td><td>false</td><td>name of current fuseation</td><td></td><td>form name</td></tr>
<tr><td>reset</td><td>false</td><td>Reset</td><td></td><td>text to display on the reset button</td></tr>

<tr><td>showCancel</td><td>false</td><td>true</td><td>true<br/>false</td><td>show the cancel button</td></tr>
<tr><td>showReset</td><td>false</td><td>true</td><td>true<br/>false</td><td>show the reset button</td></tr>
<tr><td>showSubmit</td><td>false</td><td>true</td><td>true<br/>false</td><td>show the submit button</td></tr>
<tr><td>submit</td><td>false</td><td>Save</td><td></td><td>text to display on the submit button</td></tr>

<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</div></div>
          <div style="clear: both"></div>
        </div>
      </div>
      <!-- /wrapper --><!-- /main-content -->
      <div id="footer"><div class="wrapper">
        <hr /><a href="formGroup.html">&laquo; Previous</a> | <a href="cf_select.html">Next &raquo;</a>
        <p><div id='g_footer'>&nbsp;</div></p>
        <div style="clear: both"></div>
      </div></div>

      <!-- /wrapper --><!-- /footer -->
    </div>
  </div>
<!-- /wrapper --><!-- /container -->

<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div><div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

